<template>
    <div class="cardReportLoss">
        <cardComponent pageTitle="查询服务类 --> 联名卡挂失">
            <template slot="cardBody">
                <el-form
                    class="cardForm"
                    ref="cardForm"
                    label-position="right"
                    size="small"
                    label-width="80px"
                >
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="卡号:" label-position="left" prop="CARDNBR">
                                <el-input v-model="cardInfo_3004.CARDNO" disabled></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <div class="btnBox">
                                <el-button type="primary" size="small" @click="handleConfirm">挂 失</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>

                <!-- 挂失确认对话框 -->
                <el-dialog
                    v-drag
                    title="挂失申请确认信息"
                    width="500px"
                    :visible="isShowDialog"
                    @close="handleCloseDialog"
                    append-to-body
                    custom-class="confirmDialog"
                    :close-on-click-modal="false"
                >
                    <el-row class="message">
                        <el-col :span="6" class="title">卡号：</el-col>
                        <el-col :span="18">{{ cardInfo_3004.CARDNO }}</el-col>
                    </el-row>
                    <el-row class="message">
                        <el-col :span="6" class="title">卡产品：</el-col>
                        <el-col :span="18">{{ productName }}</el-col>
                    </el-row>
                    <el-row class="confirmBtnBox">
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleReportLoss"
                            :loading="confirmLoading"
                            icon="el-icon-circle-check"
                            v-preventReClick
                        >确定</el-button>
                        <el-button
                            size="small"
                            icon="el-icon-circle-close"
                            @click="handleCloseDialog"
                        >取 消</el-button>
                    </el-row>
                </el-dialog>
            </template>
        </cardComponent>
    </div>
</template>
<script>
import { mapState } from 'vuex';
import cardComponent from '@/components/cardComponent/cardComponent.vue';
import { cardProductCheck } from '@/utils/menuRules';
import { getDictValue } from '@/utils/Common';

export default {
    name: 'cardReportLoss',
    components: {
        cardComponent,
    },
    data() {
        return {
            isShowDialog: false, // 对话框 显示/隐藏 控制
            confirmLoading: false, // 换卡/补卡按钮loading
            productName: '', // 卡产品名称
        };
    },

    // 取缓存信息
    computed: mapState({
        cardInfo_3004: state => state.common.cardInfo_3004, // 默认卡信息
        inlineParams: state => state.common.inlineParams, // 接口默认参数
        pinFlag: state => state.common.pinFlag, // 是否密码检查标志
        cardList_3601: state => state.common.cardList_3601, // 卡列表数据
    }),

    mounted() {
        this.init();
    },

    methods: {

        // 初始化
        async init() {
            console.log(this.cardList_3601, 'this.cardList_3601');
            // 查询数据库字典 获取 卡产品名称
            this.productName = await getDictValue(this.cardList_3601, this.cardInfo_3004.CARDNO, 'PRODUCT', this);

            // 菜单校验
            cardProductCheck(this.productName, this.cardInfo_3004, this, '联名卡挂失');
        },

        // 确认提交
        handleConfirm() {
            this.isShowDialog = true;
        },

        // 点击 提交 挂失申请
        handleReportLoss() {
            this.confirmLoading = true;
            this.isShowDialog = false;
            // 设置请求参数 -- M002 交易
            const appBody = {
                Source: 'AG', //
                Cardnbr: this.cardInfo_3004.CARDNO, //
                PinFlag: this.pinFlag, //
                Cancode: 'L', //
                Option: '00000000000000', //
                CanclReas: '', //
            };
            const params = JSON.parse(JSON.stringify(this.inlineParams));
            // console.log(this.defaultParams, 'this.defaultParams')
            params.body.appHead.tranCode = 'M002';
            params.body.appBody = appBody;

            // 跑 M002 交易
            this.$post.inlineTransModule.transM002(params).then((res) => {
                this.confirmLoading = false;
                if (res.status === 200) { // 接口请求成功
                    const result = JSON.parse(res.data.jsonRes);
                    console.log(result, 'result--M002');
                    if (result.sysHead.rspCd === '000000') {
                        this.$alert('联名挂失成功!', '提示', {
                            customClass: 'success', type: 'success',
                            callback: () => {
                                this.isShowDialog = false;
                            },
                        });
                    } else {
                        const errowMessage = this.handleGetErrowText(result.sysHead.ChannelId, result.sysHead.rspMsg);
                        this.$alert(errowMessage, '提示', {
                            customClass: 'error', type: 'error',
                            callback: () => { },
                        });
                    }
                } else {
                    this.$message.error('请求失败');
                }
            });
        },

        // 获取挂失失败提示文字
        handleGetErrowText(code, message) {
            let text = message;
            switch (code) {
                case '01':
                    text = '信用卡挂失失败！ 石油卡挂失失败！';
                    break;
                case '02':
                    text = '石油卡挂失失败！详情请联系发卡行。';
                    break;
                case '03':
                    text = '信用卡挂失成功！  石油卡挂失失败！';
                    break;
                case '04':
                    text = '石油卡挂失失败！详情请联系发卡行。';
                    break;
                default:
                    break;
            }
            return text;
        },

        // 点击关闭 对话框
        handleCloseDialog() {
            this.isShowDialog = false;
        },
    },
};
</script>
<style lang="scss">
// 对话框样式
.confirmDialog {
    .el-dialog__header {
        text-align: center;
        .el-dialog__title {
            font-size: 22px;
            font-weight: 500;
        }
    }
}
</style>
<style lang="scss" scoped>
.cardReportLoss {
    min-height: 100%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;

    .cardForm {
        .el-row {
            text-align: left;
        }
    }

    .el-input,
    .el-textarea {
        max-width: 400px;
    }
    .btnBox {
        text-align: right;
        padding-right: 30px;
    }
}
.confirmDialog {
    .message {
        margin-bottom: 30px;
        font-size: 16px;

        .title {
            text-align: right;
            color: #000;
            font-weight: 600;
        }
    }

    .confirmBtnBox {
        padding: 10px;
        text-align: center;
    }
}
</style>
